<template>
  <view class="su-filter-form">
    <view class="su-filter-form__handler" @click="show=!show">
      <text class="su-filter-form__icon iconfont icon-gongzuotai"></text>
    </view>
    <u-popup :show="show" mode="bottom" round="10" @close="show=false" @open="show=true">
      <view class="su-filter-form__container">
        <view class="su-filter-form__body">
          <u--form labelPosition="left" :model="formData" ref="form1">
            <view v-for="(formItem,index) in options" :key="index">
              <u-form-item :labelWidth="labelWidth" :label="formItem.label" :prop="formItem.prop" borderBottom>
                <!-- 输入框 -->
                <u--input v-if="formItem.type==='input'" :placeholder="formItem.placeholder"
                  :clearable="formItem.clearable" v-model="formData[formItem.prop]" border="none"></u--input>
                <!-- 选择框 -->
                <su-select v-if="formItem.type==='select'" :placeholder="formItem.placeholder" :options="formItem.options"
                  :clearable="formItem.clearable" v-model="formData[formItem.prop]" valueName="value" labelName="label">
                </su-select>
                <!-- 时间选择框 -->
                <su-date-picker v-if="formItem.type==='date'" :placeholder="formItem.placeholder"
                  :clearable="formItem.clearable" v-model="formData[formItem.prop]">
                </su-date-picker>
              </u-form-item>
            </view>
          </u--form>
          <slot></slot>
        </view>
        <view class="su-filter-form__footer">
          <u-button @click="cancelHandler">取消</u-button>
          <u-button type="primary" @click="confirmHandler">查询</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  /**
   * @description 筛选form
   * @date 2022-03-12
   * @version v1.0.1
   * @author gf
   */
  export default {
    name: "su-filter-form",
    props: {
      labelWidth: {
        type: [String, Number],
        default: '80px'
      },
      options: {
        type: Array,
        default () {
          return [
            // {
            //   label: '资产编号',
            //   prop: 'assetCode',
            //   placeholder: '请输入资产编号搜索',
            //   defaultValue: '',
            //   clearable: true,
            //   type: 'input'
            // },
            // {
            //   label: '创建时间',
            //   prop: 'createTime',
            //   placeholder: '请选择创建时间',
            //   defaultValue: '',
            //   clearable: true,
            //   type: 'date'
            // },
            // {
            //   label: '资产分类',
            //   prop: 'sortId',
            //   placeholder: '请选择资产分类筛选',
            //   defaultValue: '',
            //   type: 'select',
            //   clearable: true,
            //   options: [{
            //       label: '选项1',
            //       value: '1'
            //     },
            //     {
            //       label: '选项2',
            //       value: '2'
            //     },
            //   ]
            // }
          ]
        }
      }
    },
    data() {
      return {
        show: false,
        formData: {},
      };
    },
    watch: {
      show(val) {
        this.$store.commit('setPopupOpen', val)
      }
    },
    mounted() {
      this.initFormData()
    },
    methods: {
      initFormData() {
        for (var i in this.options) {
          const formItem = this.options[i]
          this.formData[formItem.prop] = formItem.defaultValue || ''
        }
      },
      // 取消
      cancelHandler() {
        this.show = false
        this.$emit('cancel')
      },
      // 确定
      confirmHandler() {
        this.show = false
        this.$emit('confirm', this.formData)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .su-filter-form {
    &__icon {
      width: 80upx;
      height: 80upx;
      font-size: 32upx;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__container{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    &__body {
      height: 65vh;
      padding: 10upx 30upx;
      overflow: auto;
    }

    &__footer {
      display: flex;
      padding: 6px;
      gap: 6px;
      margin-bottom: var(--window-bottom);
    }
  }
</style>
